<template>
  <div class="filed-list-box">
    <div
      v-for="item in typeList"
      :key="item.dictValue"
      :class="[activeClass(item)]"
      @click="itemClick(item)"
    >
      {{ item.dictLabel }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    typeList: {
      type: Array,
      default: () => [],
    },
    activeList: {
      type: String,
      default: '',
    },
  },
  data() {
    return {}
  },
  computed: {
    aSelectList: {
      get() {
        return this.activeList ? this.activeList.split(',') : []
      },
      set(val) {
        this.$emit('update:activeList', val.join(','))
      },
    },
    activeClass() {
      return (item) => {
        let findItem = this.aSelectList.find((sItem) => {
          return sItem === item.dictValue
        })
        if (findItem) {
          return 'active-item'
        } else {
          return 'item'
        }
      }
    },
  },
  methods: {
    itemClick(item) {
      let itemV = item.dictValue

      // 若选中的选项中有 ‘无’，则 点击其他的选项 无效
      // if (this.judgeHasNone() && parseInt(itemV) !== 0) {
      //   this.aSelectList = ['0']
      //   return
      // }

      let findItem = undefined
      let restList = this.aSelectList.filter((item) => {
        if (item !== itemV) {
          return true
        } else {
          findItem = item
          return false
        }
      })

      // 当点击的选项,在已选列表中 没有 该选项
      if (!findItem && parseInt(findItem) !== 0) {
        // 当点击的选项,在已选列表中 没有 该选项,并且点击的是 “无”项
        if (parseInt(itemV) === 0) {
          this.aSelectList = ['0']
          return
        }
        if (parseInt(this.aSelectList[0]) === 0) {
          this.aSelectList = [itemV]
          return
        }
        this.aSelectList = [...this.aSelectList, itemV]
      } else {
        // 当点击的选项,在已选列表中 有 该选项

        this.aSelectList = [...restList]
      }
    },
    judgeHasNone() {
      let noneValue = '0'
      let findItem = this.aSelectList.find((item) => {
        return item === noneValue
      })
      return findItem
    },
  },
}
</script>

<style lang="scss" scoped>
.filed-list-box {
  @apply grid grid-cols-3 gap-2;

  .item,
  .active-item {
    width: 255px;
    @apply text-center text-sm border rounded-md text-t999 p-2 cursor-pointer  hover:text-t333;
  }
  .active-item {
    @apply border-blue-500 text-blue-500;
  }
}
</style>
